<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 40px;
            height: 42px;
            margin: 0 auto;
            background-image: url(.//bg.png);
            border: 1px solid blueviolet;
            display: inline-block;
            position: relative;
        }
        .one{
            background-position: 3px 42px;
        }
        .two{
            background-position: -38px 42px;
        }
        .three{
            background-position: -79px 42px;
        }
        .four{
            background-position: -120px 42px;
        }
        p{
            width: 100px;
            height: 30px;
            background-image: url(.//bg.png);
            border: 1px solid blueviolet;
            display: inline-block;
            position: relative;
        }
       .o{
            background-position: 101px 0px;
            /* transform: rotate(129deg); */
        }
        .t{
            background-position: 101px -37px;
        }
        .s{
            background-position: 101px -73px;
        }
        .f{
            background-position: 101px -111px;
        }
        .a{
            background-position: 101px -149px;
        }
         a{
            position:absolute;
            width: 87px;
            height: 135px;
            left: 60%;
            top: 10%;
            background-size: 100%;
            -webkit-transform-origin: 45% 30%; 
            -webkit-animation: sec-01-p-main 5s ease-in-out  1s  infinite alternate, sec-01-p-main 1s ease-in-out  1s  infinite alternate; 
    }
    @-webkit-keyframes sec-01-p-main {
        0%{left: 10%; top: 10%;};
        100%{left: 90%;top: 10%;}
    }
    @-webkit-keyframes sec-02-p-main{
        from{-webkit-transform: rotate(0deg);};
        to{-webkit-transform: rotate(-10deg);}
    }
    </style>
</head>
<body>

    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>

    <p class="o"></p>
    <p class="t"></p>
    <p class="s"></p>
    <p class="f"></p>
    <p class="a"></p>

    <a>
        <img src="./download (1).png">
    </a>
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Script Tutorials" />
        <title>css3旋转加载动画 - 站长素材</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <link href="css/loading1.css" rel="stylesheet" type="text/css" />
        <link href="css/loading2.css" rel="stylesheet" type="text/css" />
        <link href="css/loading3.css" rel="stylesheet" type="text/css" />
        <link href="css/loading4.css" rel="stylesheet" type="text/css" />
        <style type="text/css">

.main_body{
	position:relative;
	width:580px; height:960px;
	
	}
 			 /*-webkit-animation: animation-name  animation-duration  animation-timing-function  animation-delay   animation-iteration-count animation-direction>*/
			 /*-webkit-animation: 动画的名称         表示动画持续的时间       表示动画使用的时间曲线      表示开始动画之前的延时 表示动画要重复几次            表示动画的方向>*/
            .sec-box {
                width: 320px;
                height: 504px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -252px;
                margin-left: -160px;
            }

           .bg-house {
                position: absolute;
                bottom: 50px;
                width: 100%;
                height: 110px;
                background: url("images/download.png") repeat-x 0 0;
                background-size: cover;
                -webkit-animation: index-bg-01 200s       linear         3s      infinite        alternate;
			  					  /*名称        持续时间   动画形式(匀速)    延时    重复次数（循环）    动画的方向*/
            }
                    /*transition: <property> <duration> <animation type> <delay>*/
            /*物体重复移动*/
            @-webkit-keyframes  index-bg-01 {
                from{background-position:10036% bottom;}
                to{background-position:0% bottom;}
            }

            @media (device-width:360px) and (-webkit-min-device-pixel-ratio:3) , (device-width:382px) and (-webkit-min-device-pixel-ratio:2){
                @-webkit-keyframes  index-bg-01 {
                    from{background-position:10035% bottom;}
                    to{background-position:0% bottom;}
                }
            }

            .p-main {
				position:absolute;
                width: 87px;
                height: 135px;
                left: 60%;
                top: 10%;
                /* background: url("images/download (1).png") no-repeat 0 0; */
                background-size: 100%;
               -webkit-transform-origin: 45% 30%; 
                -webkit-animation: sec-01-p-main 5s ease-in-out  1s  infinite alternate,sec-03-p-main-02 1s ease-in-out 1s infinite alternate; 

                /* -webkit-animation: sec-01-p-main 5s ease-in-out  1s  infinite alternate; */
				
            }
            /*物体移动*/
            @-webkit-keyframes  sec-01-p-main {
              0%{left:60%;top:10%;}
              50%{left:10%;top:60%;}
                100%{left:100%;top:10%;}
		   }
            /*物体旋转*/
            /* @-webkit-keyframes  sec-03-p-main-02 {
                0%{-webkit-transform:rotate(0deg);}
                100%{-webkit-transform:rotate(-10deg);}
            } */
            /*.p-main {*/
                /*bottom: 40%;*/
                /*left: 30%;*/
                /*background-size: 100%;*/
                /*-webkit-transform-origin: 45% 30%;}*/
        </style>
    </head>
    <body>
        <div class="main_body">
            <div class="element">
                <div class="loading1">
                </div>
            </div>
            <div class="element">
                <div class="loading2">
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading3">
                    <div>loading..</div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading4">
                </div>
            </div>


            <div class="element" style="width: 100%;height: 600px;position: absolute">
                <div class="loading5">
                </div>
            </div>



            <div class="sec-box">
                <div class="layer">
                    <div class="bg-house"></div>
                </div>

            </div>

            <div class="p-main"></div>

        </div>




<div style="text-align:center;clear:both">

</div>
    </body>
</html> -->